<template>
<div class="count">
   <div class="run c-shadow">
    <h1>{{taskName}}</h1>
    <div class="header">
      <span>共<span style="color:#40a1f3;"> {{total}} </span>家企业</span>
      <p>
        <el-button type="warning" plain class="btn-export">导出列表</el-button>
        <el-button type="primary" plain class="btn-start" v-show="flag===1" @click="start()">全部开始</el-button>
        <el-button type="primary" plain class="btn-start" v-show="flag===2" @click="abort()">全部暂停</el-button>
      </p>
    </div>
    <div class="progressControll">
        <p class="progressInfo">{{progress}}<span style="font-size:12px;"> %</span></p>
        <div class="pro">
          <span>进度</span><progress class="progress" :value="range" max="100"></progress>
        </div>
    </div>
    <div class="lists">
      <table class="table-fixed" width="100%" border="0" cellspacing="0" cellpadding="0" v-if="lists&&lists.length>0">
        <thead>
          <th class="th">序号</th>
          <th class="th">企业名称</th>
          <th class="th">烽火值</th>
          <th class="th">风险类型</th>
          <th class="th">计算日期</th>
          <!-- <th class="th">任务状态</th> -->
        </thead>
        <tr v-for="(list,index) in lists" :key="index">
          <td class="ent-emphasis text-center">{{index+1|sequenceNumber(listParams.pageNum)}}</td>
          <td>{{list.entName}}</td>
          <td class="text-center">{{list.totalRiskScore}}</td>
          <td class="text-center">{{list.riskDescription || '--' }}</td>
          <td class="text-center">{{list.stepDate5 | formDate(list.stepDate5)}}</td>
          <!-- <td class="text-center"></td> -->
        </tr>
      </table>
    </div>
  </div>
  <div class="block paging-wrap fr">
    <el-pagination v-if="total>listParams.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="listParams.pageNum"
      :page-size="listParams.pageSize"
      layout="prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</div>
</template>
<script>
import { sysManage as api } from '../../api'
export default {
  name: "",
  data() {
    return {
      taskName: "",
      total: 0, // 当前任务企业总数
      flag: 1,
      listParams: {
        pageNum: 1,
        pageSize: 10
      },
      id: "",
      lists: [],
      progress: 0 // 进度条进度
    }
  },
  computed: {
    range() {
      // 进度条
      return 0
    }
  },
  filters:{
    sequenceNumber(value, pageNum) {
      return (pageNum-1)*10+value
    },
    formDate(value) {
      let date = new Date()
      let year = date.getFullYear()
      let month =
        date.getMonth() > 9 ? date.getMonth() + 1 : "0" + (date.getMonth() + 1)
      let day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate()
      return year + "-" + month + "-" + day
    }
  },
  methods: {
    // 全部开始
    start() {
      this.flag=2
      // let socket = new WebSocket(this.hostUrl)
    },
    // 暂停任务
    abort() {
      this.flag=1
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    // 获取企业信息
    // getJobInfo() {
    //   api.getEntInfo('get', '/importEntInfo/getEntInfo?id='+this.id).then(rst => { console.log(rst) })
    // },
    // 分页获取当前任务内企业列表
    getList() {
      let params = Object.assign(this.listParams, { importBatchid: this.id })
      api.postEntListByBatchId(params).then(rst => {
        this.total = rst.data.total
        this.lists = rst.data.list
      }).catch()
    }
  },
  mounted() {
    this.id = this.$route.query["id"]
    this.taskName = this.$route.query["name"]
    this.getList()
    // this.getJobInfo()
  }
}
</script>
<style lang="scss" scoped>
.count {
  width: 100%;
  .run {
    width: 100%;
    h1 {
      width: 100%;
      height: 75px;
      border-bottom: 1px solid #dadada;
      text-align: center;
      line-height: 75px;
      font-size: 24px;
      font-weight: 500;
    }
    .header {
      margin-top: 24px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .btn-export,
      .btn-start {
        width: 98px;
        height: 34px;
        line-height: 8px;
      }
    }
    .progressControll {
      padding: 0 20px;
      box-sizing: border-box;
      width: 100%;
      height: 78px;
      margin-top: 30px;
      background: #f6fbff;
      background-clip: content-box;
      border-radius: 20px;
      .progressInfo {
        font-size: 28px;
        font-weight: bolder;
        font-family: helvetica;
        text-align: center;
        background: -webkit-linear-gradient(top, #0178ff, #3ac5ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      p {
        height: 74%;
        padding: 0 20px;
        text-align: center;
        line-height: (78 * 0.74px);
      }
      .pro {
        height: 20%;
        display: flex;
        align-items: center;
        span {
          font-size: 14px;
          font-weight: 400;
          margin-left: 20px;
        }
        .progress {
          display: block;
          margin-left: 10px;
          width: 92%;
          border-radius: 5px;
          height: 7px;
          background: url("../../../static/images/progress.png");
          overflow: hidden;
        }
        .progress::-webkit-progress-inner-element {
          border-radius: 5px;
        }
        .progress::-webkit-progress-value {
          border-radius: 5px;
          background: url("../../../static/images/progressValue.png");
          background-repeat: repeat-x;
        }
        .progress::-webkit-progress-bar {
          border-radius: 5px;
          background: url("../../../static/images/progress.png");
        }
      }
    }
    .lists {
      margin-top: 34px;
      padding: 0 20px 20px 20px;
      table {
        border-radius: 3px;
        thead {
          .th {
            font-weight: 800;
          }
        }
      }
    }
  }
  .pageSize {
    display: block;
    float: right;
    margin-top: 20px;
  }
}
</style>




// WEBPACK FOOTER //
// src/view/sysManage/taskRun.vue